<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<div id="example-1">
		<button v-on:click="counter += 1">增加 1</button>
		<p>这个按钮被点击了 {{ counter }} 次。</p>

		<button v-on:click="greet">Greet</button>
		<button v-on:click="warn('Form cannot be submitted yet.', $event)">
			Submit</button>
			
		<input type="checkbox" id="checkbox" v-model="checked">
		<label for="checkbox">{{ checked }}</label>
		<br/>
		<div>
		  <input v-model="parentMsg">
		  <br>
		  <child   data-3d-date-picker="true" v-bind:my-message="parentMsg"></child>
		</div>
		<br> 
		<div id="example">
		Original message:   <input v-model='message' />  
		  <p>Computed reversed message: "{{ reversedMessage }}"</p>
		  <p>Computed message2 : "{{ message2 }}"</p>
		</div>
	</div>

</body>


<script  type="text/javascript" src="js/vue.js"></script>
<script>
	Vue.component('child',{
		props: {
			'myMessage': ''
		},
		template: '<span>{{ myMessage }}</span>'
	})


	var example1 = new Vue({
		el : '#example-1',
		data : {
			counter : 0,
			name : "vue.js",
			checked: false,
			parentMsg:"",
			message: 'Hello'
		},
		computed:{
		    reversedMessage: function () {
		        // `this` points to the vm instance
		        return this.message.split('').reverse().join('')
		      },
		      message2: function () { 
		    	  return  this.message+"_copy" ;
		      }
		},
		methods : {
			greet : function(event) {
				// `this` 在方法里指当前 Vue 实例
				alert('Hello ' + this.name + '!')
				// `event` 是原生 DOM 事件
				if (event) {
					alert(event.target.tagName)
				}
			},
			warn : function(message, event) {
				// 现在我们可以访问原生事件对象
				if (event)
					event.preventDefault()
				alert(message)
			}
		}
	})
</script>


<!-- 引入样式 -->
<link rel="stylesheet"
	href="https://unpkg.com/element-ui/lib/theme-default/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

</html>


